<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*静态页面样式设置开始*/
        /*一级菜单样式设置开始*/
        *{margin:0px;padding:0px;}
        #nav{background-color:#eee;width:600px;height:40px;margin:0 auto;}
        #nav ul{list-style:none;}
        #nav ul li{float:left;line-height:40px;text-align:center;}
        /*
            text-decoration:nono;————实现了<a>标签的默认样式为零
            text-align:center;实现了<a>标签的样式文字居中
            display:block;————一定一定一定要设置，因为只有把<a>标签的display属性设置为block，才能对<a>标签进行样式的设置
        */
        #nav a{text-decoration: none;display: block;padding:0 10px;color: #000;}
        #nav a:hover{color: #ccc;background-color: #ddd;}
        /*一级菜单样式设置结束*/

        /*二级菜单设置样式开始*/
        /*
            肯定肯定肯定要设置ul li ul的position属性值为absolute,这样一级菜单的宽度将二级菜单的不受影响
            ul li ul li{margin-top设置值导致的问题是，当鼠标滑到二级菜单下面时会退出二级菜单,所以应该用border-top来代替}
        */
        #nav ul li ul li{float: none;background-color: #eee;margin-top: 0px;border-top: 2px solid #fff;}
        #nav ul li{position: relative;}
        #nav ul li ul{position: absolute;left: -145px;height: 40px;}
        #nav ul li ul li a:hover{background-color: #ddd;}
        /*二级菜单设置样式结束*/
        /*静态页面设置样式结束*/
        /*CSS方法实现二级菜单的显示和隐藏开始*/
        #nav ul li ul{display: none;}
        #nav ul li:hover ul{display: block;}
        /*CSS方法实现二级菜单的显示和隐藏结束*/
        /*浏览器兼容性测试开始*/
        #nav a{height: 40px;}
        #nav ul li ul li a{width: 500px;}
        /*浏览器兼容性测试结束*/
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">菜单1</a>
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
        <li><a href="#">菜单2</a>
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
        <li><a href="#">菜单3</a>
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
        <li><a href="#">菜单4</a>
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
        <li><a href="#">菜单5</a>
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
        <li><a href="#">菜单6</a>
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
    </ul>
    <div>
</body>
</html>
